<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动常用场景1:图片与文字环绕</title>
		<style>
			img{
				/* 图片脱离文档流--文字包含在图片周边*/
				float:left;
				margin-right: 50px;/* 图片与文字链接处间隙 */
				margin-bottom: 50px;/* 图片与文字链接处间隙 *
			}
			p{
				font-size: 16px;/* 页面默认字体尺寸 */
				line-height: 20px;/* 浮动文字，行高无法设定 */
				word-spacing: 20px;
			}
		</style>
	</head>
	<body>
		<h1>浮动之图片文字环绕</h1>
		<img src="img/哪吒1.png" alt="魔丸" width="250px" height="250px">
		<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Blanditiis distinctio reprehenderit qui amet doloribus perspiciatis sit tenetur fuga id quasi! Nulla repudiandae veniam consectetur facilis quisquam. Assumenda reiciendis eum alias! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, omnis nesciunt dignissimos deserunt obcaecati veritatis atque ratione doloremque. Placeat obcaecati doloremque, quas delectus voluptates consectetur optio earum at alias cum? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officia quae natus fuga ratione possimus voluptatem ea, sapiente voluptatum veniam aspernatur dicta suscipit nihil nemo! Placeat, quae velit? Natus, perspiciatis itaque.</p>
	</body>
</html>